<template>
    <div>
        <h1>房号列表</h1>
        <a href="/add">房号添加</a>
        <a href="https://localhost:7292/api/Number/Exlsx">导出</a>
        <br>
        状态:<select v-model="list.stateid">
                        <option value="0">请选择</option>
                        <option v-for="d in xl" :value="d.stateId">{{d.sname}}</option>
                    </select>
        房型类型:<select v-model="list.roomid">
                        <option value="0">请选择</option>
                        <option v-for="s in xls" :value="s.roomId">{{s.rname}}</option>
                    </select>
        <input type="button" value="查询" @click="cx">
        <input type="button" value="批量删除" @click="plsc">                        
        <table class="table">
            <thead>
                <tr>
                    <td><input type="checkbox" v-model="qx" @change="qxqbx"></td>
                    <td>编号666</td>
                    <td>房号</td>
                    <td>状态</td>
                    <td>联系人手机号</td>
                    <td>联系人名</td>
                    <td>房型类型</td>
                    <td>联系人头像</td>
                    <td>操作</td>
                </tr>
                
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td><input type="checkbox" v-model="fx" :value="d.nid"></td>
                    <td>{{d.nid}}</td>
                    <td>{{d.nnumber}}</td>
                    <td>
                        <span style="color: green;" v-if="d.sname=='空闲'">{{d.sname}}</span>
                        <span style="color: blue;" v-else-if="d.sname=='已入住'">{{d.sname}}</span>
                        <span style="color: red;" v-else="d.sname=='维修'">{{d.sname}}</span>
                    </td>
                    <td>{{d.nphone.substring(0,2)}}**{{d.nphone.substring(4,7)}}**{{d.nphone.substring(9,11)}}</td>
                    <td>{{d.nname}}</td>
                    <td>{{d.rname}}</td>
                    <td><img :src="'https://localhost:7292/'+d.nimage" style="width: 60px;height: 60px;"></td>
                    <td><input type="button" value="编辑" @click="xg(d.nid)"></td>
                </tr>
            </tbody>
        </table>
        共{{page.totanum}}条,每页{{list.size}}条,共{{page.totapage}}页,当前{{list.index}}页
        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(2)">
        <input type="button" v-for="m in page.totapage" :value="m" @click="ym(m)">
        <input type="button" value="下一页" @click="fy(3)">
        <input type="button" value="尾页" @click="fy(4)">
        <input type="number" v-model="list.index" @change="tz(list.index)">
        <select v-model="list.size" @change="yrl">
            <option value="2">2</option>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="20">20</option>
        </select>

    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();
const data=ref([{
      "nid": 1,
      "nnumber": "1001",
      "stateId": 2,
      "ndatetime": null,
      "nphone": "137123456789",
      "nname": "小明",
      "roomId": 1,
      "nimage": "\\img\\202505122039561.jpg",
      "rname": "大床房",
      "sname": "已入住"
}])
const list=ref({
    index:1,
    size:2,
    stateid:0,
    roomid:0
})
const page=ref({
    totanum:0,
    totapage:0
})
onMounted(()=>{
    show();
    xlk()
    xlks()
})
const show=()=>{
    axios.get("/api/Number/GetNumber",{params:list.value}).then(res=>{
        data.value=res.data.list
        page.value.totanum=res.data.listcount
        page.value.totapage=Math.ceil(page.value.totanum/list.value.size)
    })
}
const fy=(val:any)=>{
    if(val==1){
        list.value.index=1
        show()
    }
    if(val==2){
        if(list.value.index>1){
            list.value.index-=1
            show()
        }
    }
    if(val==3){
        if(list.value.index<page.value.totapage){
            list.value.index+=1
            show()
        }
    }
    if(val==4){
        list.value.index=page.value.totapage
        show()
    }
}
const ym=(val:any)=>{
    list.value.index=val;
    show()
}
const tz=(val:any)=>{
    if(list.value.index>1&&list.value.index<=page.value.totapage){
        list.value.index=val;
        show()
    }else{
        list.value.index=1
        show()
    }
    
}
const yrl=()=>{
    list.value.index=1
    show()
}
const xl=ref({})
const xlk=()=>{
    axios.get("/api/Number/GetState").then(res=>{
        xl.value=res.data
    })
}
const xls=ref({})
const xlks=()=>{
    axios.get("/api/Number/GetRoom").then(res=>{
        xls.value=res.data
    })
}
const cx=()=>{
    list.value.index=1
    show()
}

const qx=ref(false)
const fx=ref([]);
const qxqbx=()=>{
    if(qx.value){
        data.value.forEach(e=>{
            fx.value.push(e.nid)
        })
    }
    else
    {
        fx.value=[]
    }
}
const plsc=()=>{
    if(confirm("确认删除吗")){
        axios.delete("/api/Number/DeleteNumber",{params:{ids:fx.value.toString()}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }
        else
        {
            alert("删除失败")
            return
        }
    })
    }
    
}
const xg=(val:any)=>{
    router.push({path:"/update",query:{id:val}})
}
</script>

<style scoped>

</style>